const rows = document.querySelectorAll("#ui ul li");
//获取所有的li
const html = document.documentElement;
//获取document对象

//给document对象添加事件（滚动）
document.addEventListener('scroll', (e) => {
    let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight)
        //设置一个变量
        //滑动距离顶部的高度 / 整个元素完全显示的高度 - 可见内容的高度
    console.log(scrolled)

    let total = 1 / rows.length;
    //计算每个li所占的位置

    //循环index索引，row每一个li
    for (let [index, row] of rows.entries()) {
        //设置起始点
        let start = total * index;
        //设置结束点
        let end = total * (index + 1);
        //设置progress变量
        let progress = (scrolled - start) / (end - start);
        if (progress >= 1) progress = 1;
        if (progress <= 0) progress = 0;

        row.style.setProperty('--progress', progress)
    }
})